<template>
  <div v-if="drawerType === 'execute' || drawerType === 'file'" class="add-equip-detail">
    <px-scrollbar class="add-equip-content">
      <EditDropDown dropdownTitle="维修资料">
        <template v-slot:content>
          <FileUpload
            fileType="edit"
            :fileData="{ moduleName: moduleName }"
            :fileList="fileLists"
            style="margin-bottom: 18px"
            @changeFileList="changeFileList"
            @saveFileStatus="saveFileStatus"
          />
        </template>
      </EditDropDown>
    </px-scrollbar>
    <div class="info-form-btns">
      <px-button v-if="drawerType == 'execute'" type="primary" :disabled="fileStatusFlag" @click="handleSubmit">保存进度</px-button>
      <px-button
        v-if="drawerType !== 'view' && [4, 6].includes(taskDetailData.workOrderStatus) && userId === taskDetailData.executorId"
        type="primary"
        @click="emits('handleFinish')"
      >
        完成维修
      </px-button>
      <px-button v-if="drawerType === 'file'" type="primary" @click="handleSubmit">补充资料</px-button>
      <px-button v-if="drawerType === 'file' && isFinishMaterial === 0" type="primary" @click="handleFileFinish"> 资料补充完成 </px-button>
      <px-button @click="backMainPage">取消</px-button>
    </div>
  </div>
  <div v-else class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail">
      <div class="view-equip-title">维修资料</div>
      <div class="view-equip-content" style="margin-bottom: 24px">
        <FileUpload fileType="view" :fileData="{ moduleName: moduleName }" :fileList="fileLists" />
      </div>
    </px-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { finishFileMaintain, queryMaintainMeans, saveMaintainMeans } from "@/api/equip/maintain";
import FileUpload from "@/components/Upload/FileUpload.vue";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { reactive, toRefs, watchEffect } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "handleFinish"]);
const props = defineProps(["taskId", "activeName", "taskDetailData", "drawerType", "userId"]);
const preName = defineModel("preName");
const fileStatusFlag = defineModel("fileStatusFlag");
const state = reactive<any>({
  fileLists: [],
  moduleName: "DIGITALTWINS_MAINTENANCE_MATERIAL",
  MaintainMeans: "",
  isFinishMaterial: 0
});
const { fileLists, moduleName, MaintainMeans, isFinishMaterial } = toRefs(state);

watchEffect(async () => {
  if (props.activeName === "forth") {
    const res = await queryMaintainMeans({ id: props.taskId });
    isFinishMaterial.value = res.isFinishMaterial;
    fileLists.value = res.fileDTOs || [];
    if (props.drawerType === "execute" || props.drawerType === "file") {
      MaintainMeans.value = JSON.stringify(fileLists.value);
    }
  } else if (preName.value === "forth") {
    if (props.drawerType !== "execute" && props.drawerType !== "file") {
      preName.value = "";
      return;
    }
    let copyData = JSON.parse(JSON.stringify(fileLists.value));
    copyData.forEach(item => {
      if (item.hasOwnProperty("uid")) {
        delete item.uid;
      }
    });
    if (JSON.stringify(copyData) !== MaintainMeans.value) {
      PxMessageBox.confirm("切换页签会导致“维修资料”内容无法保存，确定要切换吗？", "提示", {
        confirmButtonText: "保存进度",
        cancelButtonText: "取消保存",
        type: "warning",
        draggable: true
      })
        .then(async () => {
          handleSubmit();
          preName.value = "";
        })
        .catch(() => {
          preName.value = "";
        });
    } else {
      preName.value = "";
    }
  }
});

// 保存进度
const handleSubmit = async () => {
  const arr1 = [];
  fileLists.value.forEach(item => {
    arr1.push(item.id);
  });
  const params = {
    workOrderId: props.taskId,
    maintenanceMaterialIDs: arr1,
    isFinishMaterial: isFinishMaterial.value
  };
  await saveMaintainMeans(params);
  PxMessage.success("保存进度成功");
  MaintainMeans.value = JSON.stringify(fileLists.value);
};

const handleFileFinish = async () => {
  const res = await finishFileMaintain({
    workOrderId: props.taskId,
    isFinishMaterial: 1
  });
  if (res) {
    PxMessage.success("资料补充完成");
    history.go(-1);
  }
};

// 新的文件列表
const changeFileList = val => {
  fileLists.value = val;
};
// 文件是否上传完，是否可以保存
const saveFileStatus = val => {
  fileStatusFlag.value = val;
};

// 取消，返回主页面
const backMainPage = async () => {
  // const arr1 = [];
  // if (fileLists.value && fileLists.value.length > 0) {
  //   fileLists.value.forEach(item => {
  //     arr1.push(item.id);
  //   });
  //   const params = {
  //     fileId: arr1
  //   };
  //   await deleteFile(params);
  //   PxMessage.success("文档删除成功");
  //   fileLists.value = [];
  // }
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("./style.scss");
// @import url("@/views/all/equip/scss/add-detail.scss");
// @import url("@/views/all/equip/scss/view-detail.scss");

.add-equip-detail {
  .add-equip-content {
    height: calc(100vh - 500px);
    padding: 0 0 24px;
  }
}

.view-equip-detail-wrap {
  .view-equip-detail {
    height: calc(100vh - 439px);
    padding: 0;
  }
}
</style>
